*{
	padding:0;margin:0;
	font-family:  "Helvetica Neue", Helvetica, Arial, Microsoft YaHei,sans-serif;
	font-size: 16px;
	color: rgb(235,235,235);
	 }
	 body{
	 	background: rgb(20,23,33);
	 }
	 ul,li{
		list-style:none; 
	 }

	 #nav{
	 	width: 80%;
	 	margin: 0 auto;
	 	height: 10%;
	 	position: relative;
	 	background: rgba(25,29,45,0.3);
	 	z-index: 789;
	 }

	 #nav>.navbar>li{
	 	width: 14%;
	 	padding:1%;
	 	margin:1%;
	 	float: left;
	 	text-align: center;
	 	font-size: 16px;
	 	position: relative;
	 	cursor:pointer;
	 	border-radius: 10%;
	 	background: linear-gradient(rgb(18, 24, 35), rgb(22, 29, 43));
	    border-radius: 30px 30px 30px 30px;
	   -webkit- border-radius: 30px 30px 30px 30px;
	   -moz- border-radius: 30px 30px 30px 30px;
	    -ms-border-radius: 30px 30px 30px 30px;
	    -o-border-radius: 30px 30px 30px 30px;
	    box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2);
	 -webkit- box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2);
	    -moz- box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2);
	    box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2);
	    box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.2);
               transition:all 1.5s linear;
               -webkit- transition:all 1.5s linear;
               -moz- transition:all 1.5s linear;
               -ms- transition:all 1.5s linear;
               -o-transition:all 1.5s linear;
	 	
	 	/*border:1px solid red;*/
      

	 }
	#nav>.navbar>li:hover{
		font-size: 20px;
	 	background: linear-gradient(rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -webkit-linear-gradient(rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -moz-linear-gradient(rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -ms-linear-gradient(rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -o-linear-gradient(rgb(18, 24, 35), rgb(22, 29, 80));
	 	box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	 	-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	 	-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	 	-ms-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	 	-o-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	 	 transition:all 1.5s linear;
	 	 -webkit-transition:all 1.5s linear;
	 	 -moz-transition:all 1.5s linear;
	 	 -ms-transition:all 1.5s linear;
	 	 -o-transition:all 1.5s linear;
	 }
	 	#nav>.navbar>.active{
		font-size: 20px;
	 	background: linear-gradient(rgb(18, 24, 35), rgb(22, 29, 80));
	 	background:-webkit- linear-gradient(rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -moz-linear-gradient(rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -ms-linear-gradient(rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -o-linear-gradient(rgb(18, 24, 35), rgb(22, 29, 80));
	 	box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	 	-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	 	-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	 	-ms-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	 	-o-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	 	 transition:all 1.5s linear;
	 	 -webkit-transition:all 1.5s linear;
	 	 -moz-transition:all 1.5s linear;
	 	 -ms-transition:all 1.5s linear;
	 	 -o-transition:all 1.5s linear;
	 }

	 .myself{
	 	background: rgba(255,255,255,0.02);
	 	border-radius: 0 0  10px 10px;
	 	padding: 5%;
	 	position: absolute;
	 	width: 10%;
	 	top: 10%;
	 	left:10%;
	 	z-index:1
	 }
	 #nav:after{
	 	content: "";
	 	width: 0px;
	 	height: 0px;
	 	display: block;
	 	clear: both;
	 }
	 


     #content{
        width:595px;
        height:720px;     

        perspective:800px;
        -webkit-perspective:800px;
        -moz-perspective:800px;
        -ms-perspective:800px;
        -o-perspective:800px;
  
       /*-webkit- perspective:800;*/
       /*-webkit- perspective-origin:50% 50%;*/
        perspective-origin:50% 50%;
        -webkit-perspective-origin:50% 50%;
        -moz-perspective-origin:50% 50%;
        -ms-perspective-origin:50% 50%;
        -o-perspective-origin:50% 50%;
        /*overflow: hidden;*/
        margin:0 auto;
        margin-left: 800px;
background: linear-gradient( to right, rgb(18, 24, 35), rgb(22, 29, 80));   
-webkit-background: linear-gradient( to right, rgb(18, 24, 35), rgb(22, 29, 80));   
-moz-background: linear-gradient( to right, rgb(18, 24, 35), rgb(22, 29, 80));   
-ms-background: linear-gradient( to right, rgb(18, 24, 35), rgb(22, 29, 80));   
-o-background: linear-gradient( to right, rgb(18, 24, 35), rgb(22, 29, 80));   
border: 1px solid rgb(18, 18, 18);
box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
-ms-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
-o-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
text-shadow: 0 -1px #0F0F0F;
-webkit-text-shadow: 0 -1px #0F0F0F;
-moz-text-shadow: 0 -1px #0F0F0F;
-ms-text-shadow: 0 -1px #0F0F0F;
-o-text-shadow: 0 -1px #0F0F0F;
 }
#xiaoxie00,#xiaoxie01,#xiaoxie02,#xiaoxie03,#xiaoxie04,#xiaoxie05,#xiaoxie06,#xiaoxie07{
	    width:595px;
                height:720px;
	border: 1px solid rgb(18, 18, 18);
box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
-ms-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
-o-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);

	 	background: rgb(34,41,48);
	 	margin:0 auto;
}
    .box{
        width:595px;
        height:720px;
        transform-style:preserve-3d;
        -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
      -ms-transform-style:preserve-3d;
        -o-transform-style:preserve-3d;
       /*-webkit- transform-style:-webkit-preserve-3d;*/
        position: relative;
    }
.box >.perspective{
    width:595px;
    height:720px;
    background: red;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 300px;
     transform:rotateY(90deg);
    -webkit-transform:rotateY(90deg);
     -moz-transform:rotateY(90deg);
     -ms-transform:rotateY(90deg);
     -o-transform:rotateY(90deg);
       transform-origin:left;
       -webkit-transform-origin:left;
       -moz-transform-origin:left;
       -ms-transform-origin:left;
       -o-transform-origin:left;
          transition:all 1s linear;
          -webkit-transition:all 1s linear;
          -moz-transition:all 1s linear;
          -ms-transition:all 1s linear;
          -o-transition:all 1s linear;

}
#xiaoxie00{
    background: pink;
    transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);
    -o-transform:rotateY(0deg);
    transform-origin:left;
    -webkit-transform-origin:left;
    -moz-transform-origin:left;
    -ms-transform-origin:left;
    -o-transform-origin:left;
    transition:all 1s linear;
    -webkit-transition:all 1s linear;
    -moz-transition:all 1s linear;
    -ms-transition:all 1s linear;
    -o-transition:all 1s linear;
}

#console{
    width:20%;
    height: 20%;
    margin:0 auto;
    margin-top: 4%;
}
#console span{
    width:40px;
    height: 40px;
    border-radius: 50%;
    cursor:pointer;
    background: rgb(22, 29, 80);
    text-align: center;
    display: inline-block;
    transition:all 1.5s linear;
    -webkit-transition:all 1.5s linear;
   -moz-transition:all 1.5s linear;
    -ms-transition:all 1.5s linear;
    -o-transition:all 1.5s linear;
}
#console span:hover{
	background: rgb(185, 243, 254);
	box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	-ms-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
	-o-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);
}
#console span .iconfont{
	font-size: 40px;
	color: rgb(235, 235, 235);
	border-radius: 50%;
}
	 #xiaoxie00{
	 	width:595px;
	 	height:720px;
	 	background: rgb(34,41,48);
	 	margin:0 auto;

	 }
	 .cover{
	 	height: 300px;
	 	background: linear-gradient(rgb(23, 30, 35), rgb(22, 29, 43));
	 	background: -webkit-linear-gradient(rgb(23, 30, 35), rgb(22, 29, 43));
	 	background: -moz-linear-gradient(rgb(23, 30, 35), rgb(22, 29, 43));
	 	background: -ms-linear-gradient(rgb(23, 30, 35), rgb(22, 29, 43));
	 	background: -o-linear-gradient(rgb(23, 30, 35), rgb(22, 29, 43));
	 	box-shadow: 0px 1px 0px #888888;
	 	position: relative;
	 }
	 .cover>div{
	 	background: url(xiedeyong.jpg);
	 	position: absolute;
	 	width: 180px;
	 	height: 180px;
	 	bottom:-90px;
	 	left: 35%;
	 	border-radius: 50%;
	 	transform:rotate(0deg);
	 	-webkit-transform:rotate(0deg);
	 	-moz-transform:rotate(0deg);
	 	-ms-transform:rotate(0deg);
	 	-o-transform:rotate(0deg);
	 	transition:all 1.5s linear;
	 	-webkit-transition:all 1.5s linear;
	 	-moz-transition:all 1.5s linear;
	 	-ms-transition:all 1.5s linear;
	 	-o-transition:all 1.5s linear;
	 	background-size: 180px 180px;
	 	-webkit-background-size: 180px 180px;
	 	-moz-background-size: 180px 180px;
	 	-ms-background-size: 180px 180px;
	 	-o-background-size: 180px 180px;
	 }
	 .cover>div>img{
	 	width:180px;
	 	height: 180px;
	 	border-radius: 50%;
	 }
	 .cover>div:hover{
	 	transform:rotate(360deg);
	 	-webkit-transform:rotate(360deg);
	 	-moz-transform:rotate(360deg);
	 	-ms-transform:rotate(360deg);
	 	-o-transform:rotate(360deg);
	 	box-shadow: 1px 1px 2px  rgb(45,45,45);
	 	-webkit-box-shadow: 1px 1px 2px  rgb(45,45,45);
	 	-moz-box-shadow: 1px 1px 2px  rgb(45,45,45);
	 	-ms-box-shadow: 1px 1px 2px  rgb(45,45,45);
	 	-o-box-shadow: 1px 1px 2px  rgb(45,45,45);

	 }
	 .context{
	 	width: 595px;
	 	height: 400px;
	 	padding-top: 100px;
	 	text-align: center;
	 }
	 .context>h1{
	 	color: rgb(235,235,235);
	 	font-family: Microsoft YaHei;
	 	font-size: 30px;
	 }
	 .context>p{
	 	padding-top: 60px;
	 	color: rgb(225,225,255);
	 	font-size: 18px;
	 	font-family: Microsoft YaHei;
	 }
	 #xiaoxie01,#xiaoxie02{
	 	width:595px;
	 	height:720px;
	 	background: linear-gradient( to right, rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -webkit-linear-gradient( to right, rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -moz-linear-gradient( to right, rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -ms-linear-gradient( to right, rgb(18, 24, 35), rgb(22, 29, 80));
	 	background: -o-linear-gradient( to right, rgb(18, 24, 35), rgb(22, 29, 80));
	 	margin:0 auto;
	 	
	 }
	 .education,.project,.work{
	 	width: 100px;
		height: 100px;
		position: relative;
		margin: 0 auto;
		margin-bottom:208px;
	 }
	.education_first,.work_first,.project_first{
		width: 100px;
		height: 100px;
		background:rgb(12,134,255);
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		margin: 0 auto;
		border-radius: 5px 0 5px 0;
	}
	.education_second,.work_second,.project_second{
		width: 100px;
		height: 100px;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		color: rgb(235,235,235);
		transition:all 1.5s linear;
		-webkit-transition:all 1.5s linear;
		-moz-transition:all 1.5s linear;
		-ms-transition:all 1.5s linear;
		-o-transition:all 1.5s linear;
	}
	.education_second>span>i,.work_second>span>i,.project_second>span>i{
		font-size: 50px;
		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-o-transform:rotate(0deg);
	
	}
	.education_second:hover,.work_second:hover,.project_second:hover{
		transform:scale(1.5,1.5);
		-webkit-transform:scale(1.5,1.5);
		-moz-transform:scale(1.5,1.5);
		-ms-transform:scale(1.5,1.5);
		-o-transform:scale(1.5,1.5);


	}
	.education_three ,.work_three{
		width: 250px;
		position: absolute;
		left: 50%;

	}
	.education_three>h1,.education_four>h1,.work_three>h1,.work_four>h1{
		font-size: 20px;
		padding: 10px;

	}
	.education_three .chg,.education_four .rot,.work_three .chg,.work_four .rot{
		width: 240px;
		height: 3px;
		background: rgb(12,134,255);
		display: inline-block;
	}
	.education_three .rot,.education_four .chg,.work_three .rot,.work_four .chg{
		width: 10px;
		height: 10px;
		border-radius: 10%;
		background: rgb(12,134,255);
		display: inline-block;
	}
	.education_four,.work_four{
		width: 250px;
		position: absolute;
		left: -200%;
		bottom: -210%;
	}
	.education_three>p,.education_four>p,.work_four>p{
		padding-left: 10px;
		font-size: 14px;
	}
	.education:before{
		content: "";
		width: 4px;
		height: 720px;
		background:rgb(12,134,255);
		display: block;
		position: absolute;
		left: 48%;
	}
	#xiaoxie03{
		width: 595px;
		height: 720px;
		background: rgb(13,18,59);
		margin: 0 auto;
	}
	#xiaoxie03>.evaluate{
		width: 560px;
		height:560px;
		margin: 0 auto;
	}
	#xiaoxie03>.evaluate>p{
		padding-top: 20px;
		text-indent: 2em;
	}
	#xiaoxie04{
		width: 595px;
		height: 720px;
		background: rgb(13,18,59);
		margin: 0 auto;
	}
	.end{
		width: 500px;
		margin: 0 auto;
		text-align: center;
	}
	.end  img{
		width: 80%;
	}
	#pension{
		width: 5%;
		border: 1px solid rgb(18, 18, 18);
		box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
		-webkit-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
		-moz-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
		-ms-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
		-o-box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
		position: fixed;
		top: -200px;
		right: 5%;
		height:40%;
		opacity: 0;
	}
	#pension>ul>li>a{
		width:100%;
		height:80%;
		text-align: center;
		line-height: 60px;
		display: block;
		text-decoration: none;
	             background:rgb(18, 24, 35);

	}
	#pension>ul>li>.active01{

		background: rgb(22, 29, 80);
		color: rgb(210,210,231)
		
	}

	/*切换按钮*/
	#change{
		cursor: pointer;
	}
	  /*ie6 hack*/
        * html, * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
        }

        * html #pension {
            /*position: fixed;*/
            position: absolute;
            top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+300+'px');
        }

